<template>
  <view class="personal-center">
    <view class="personal-info">
      <view class="avatar">
        <image :src="displayedUserInfo.avatarUrl" mode="aspectFill" @click="preAvatar()"></image>
      </view>
      <view class="user-name">{{ displayedUserInfo.name }}</view>
      <view class="user-mail" @click="getUserInfo">{{ displayedUserInfo.mail }}</view>
    </view>
    <view class="function-list">
      <!-- <view class="function-item" @click="goToOrderList">
        <view class="icon">
          <image src="/static/mine/release.png" mode="aspectFit"></image>
        </view>
        <view class="text">发布闲置</view>
      </view>
      <view class="function-item" @click="goToAddressList">
        <view class="icon">
          <image src="/static/mine/feedback.png" mode="aspectFit"></image>
        </view>
        <view class="text">反馈</view>
      </view> -->
			<view class="function-item" @click="goToMyGoods">
			  <view class="icon">
			    <image src="/static/mine/mygoods.png" mode="aspectFit"></image>
			  </view>
			  <view class="text">我的发布</view>
			</view>
      <view class="function-item" @click="goToUserInfo">
        <view class="icon">
          <image src="/static/mine/user-info.png" mode="aspectFit"></image>
        </view>
        <view class="text">个人资料</view>
      </view>
    </view>
  </view>
</template>

<script>
import { useUserStore } from '../../stores/user';
import { mapActions, mapState } from 'pinia';

export default {
  computed: {
    ...mapState(useUserStore, ['userInfo', 'isGetUserInfo']),
    displayedUserInfo() {
      return this.isGetUserInfo ? this.userInfo : this.defaultUserInfo;
    }
  },
  data() {
    return {
      defaultUserInfo: {
        name: "Jufer",
        mail: "[获取个人资料]",
        avatarUrl: "/static/image/mine.png",
      }
    };
  },
  methods: {
    ...mapActions(useUserStore, ['fetchUserInfo', 'setUserInfo']),
		
		goToMyGoods(){
			uni.navigateTo({
			  url: "/pages/mygoods/mygoods",
			});
		},
		//头像预览
		preAvatar(){
			if(!this.isGetUserInfo){
				return
			}
			const arr = [this.displayedUserInfo.avatarUrl]
			console.log(arr)
			uni.previewImage({
				urls: arr
			})
		},

    goToOrderList() {
      uni.navigateTo({
        url: "/pages/orderList/orderList",
      });
    },
    goToAddressList() {
      uni.navigateTo({
        url: "/pages/addressList/addressList",
      });
    },
    async goToUserInfo() {
      if (!this.isGetUserInfo) {
        await this.getUserInfo();
      }
      uni.navigateTo({
        url: "/pages/user-info/user-info",
      });
    },
    async getUserInfo() {
      if (this.isGetUserInfo) {
        console.log("个人资料已经获取");
        return;
      }
      const app = getApp();
      await this.fetchUserInfo(app.globalData.api, app.globalData.rhc);
    }
  },
  onShow() {
    console.log("个人资料展示");
  }
}
</script>

<style>
.personal-center {
  padding: 20rpx;
}

.personal-info {
  text-align: center;
  margin-bottom: 30rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  overflow: hidden;
  margin: 0 auto;
}

.avatar image {
  width: 100%;
  height: 100%;
}

.user-name {
  font-size: 32rpx;
  margin-top: 20rpx;
}

.user-mail {
  font-size: 28rpx;
  color: #666;
}

.function-list {
  display: flex;
  flex-wrap: wrap;
}

.function-item {
  flex: 0 0 33.333%;
  text-align: center;
  padding: 20rpx;
  box-sizing: border-box;
  cursor: pointer;
}

.function-item .icon {
  width: 80rpx;
  height: 80rpx;
  margin: 0 auto;
}

.function-item .icon image {
  width: 100%;
  height: 100%;
}

.function-item .text {
  margin-top: 10rpx;
  font-size: 28rpx;
}
</style>
